<template>
  <div>
    <van-nav-bar class="van-app">

      <van-button class="btnSearch" to="/serach"  round icon="search" slot="title" type="info">搜索</van-button>
    </van-nav-bar>
    <van-tabs v-model="activeName">
      <van-tab :title="item.name" :key="item.id" v-for="item in userData" >
          <userchannelwenz :channel="item"></userchannelwenz>

      </van-tab>
      <!-- 在最后一个添加元素,是为了站位,用来解决navRight挡住下一个内容 -->
      <div slot="nav-right" class="navRmd">

      </div>
      <div slot="nav-right" @click="dianj" class="navRight">
        <van-icon name="wap-nav" />

      </div>
    </van-tabs>
    <van-popup v-model="show"  position="top" close-icon-position="top-left" closeable get-container="body" class="popup">
      <channleEinde :fistActivNmae="activeName" @upActiveName="updata" @close="show = false" :channel="userData"></channleEinde>
    </van-popup>

  </div>
</template>
<script>
import { UserPingd } from "@/api/user"
import  userchannelwenz  from "./components/userChannle"
import channleEinde from "./components/channleEnid"
import {getItem} from '@/utils/localStorag'
// import { mapState }  from "vuex"
import {mapState} from "vuex"
export default {
    components:{
        userchannelwenz,
        channleEinde
    },
    data(){
        return{
            activeName:0,
            userData:[],
            show:false
        }
    },
     async created(){
       var channdata = []
        var { data } = await this.userChannel();
        

        // console.log(this.user)    
        // 1.渲染频道列表
        // 1.1如果用户登录了,就渲染用户自己的
        // 1.2如果用户没用登录,就渲染保存在本地存储中的数据
        // 1.3如果用户没有登录,也没有本地存储,就用推荐的
        
        if (this.user){
          // 用户登录
          channdata = data.data.channels

        }else {
          var bengd = getItem('userChannle')
          
          // 用户没有登录
          if (bengd){
              // 本地中有数据
              channdata = bengd

          }else {
            // 本地中没有数据
            channdata = data.data.channels


          }
          

        }
        this.userData = channdata
        
        

    },
    
    methods:{
        userChannel(){
            
            return UserPingd()
        },
        dianj(){
          this.show = true
        },
        updata(index){
          
          this.activeName = index

        }
    },
    computed:{
      ...mapState(['user'])
    }
};
</script>
<style scoped lang="less">
.navRmd {
  width: 33px;
  flex-shrink: 0;
}
/deep/.van-nav-bar__title {
  max-width: none;
}
.btnSearch {
  width: 277px;

  height: 33px;
  background: #5babfb;
  font-size: 14px;
  /deep/.van-icon-search {
    font-size: 16px;
  }
}
.popup {
  height: 100%;
}
.navRight {
  height: 43px;
  // line-height: 43px;
  position: fixed;

  // position: fixed;
  display: flex;
  justify-content: center;
  align-content: center;
  right: 0;
  background: #ffffff;
  width: 33px;
  
  

  opacity: 0.9;
  .van-icon{
    font-size: 24px;
    line-height: 43px;
  }
    
  
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 1px;
    height: 29px;
    background: url(../../utils/shux.png) no-repeat;
    background-size:contain ;


  }

}
</style>
